:root {
    --gray: #353a40;
    --blue: #007aff;
    --blue-dark: #0057b8;
    --green: #27a844;
    --red: #d93646;
    --yellow: #fcc10b;
    --color-head: #f7f7f7;
    --color-border: #e3e3e3;
    --color-input-border: #c7c7c7;
    --color-card-bg: #e8ecef;
    --color-table-row-dark: #f2f2f2;
    --color-table-row-light: white;
}

body {
    margin: 0;
}

/* --------- 布局 --------- */
header {
    background-color: var(--gray);
    color: white;
    padding: 15px 40px;
}
.container {
    margin: 0 40px;
}

/* --------- 组件 --------- */
/* 图片 */
.img {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 5px;
}

/* 面板 */
.panel {
    margin: 10px;
    border: var(--color-border) 1px solid;
    border-radius: 5px;
}
.panel-head {
    padding: 10px 15px;
    background-color: var(--color-head);
    color: black;
    border-bottom: var(--color-border) 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel-body {
    padding: 20px 15px;   
}

/* 卡片 */
.card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 15px 25px;
    margin: 10px;
}

/* 手风琴 */
.accordion {
    border: var(--color-border) 1px solid;
    border-radius: 5px;
    margin: 10px;
}
.accordion-head {
    border-bottom: var(--color-border) 1px solid;
    padding: 15px 25px;
    background-color: var(--color-head);
}
.accordion-title {
    color: var(--blue);
    text-decoration: none;
    cursor: pointer;
}
.accordion-title:hover {
    text-decoration: underline;
    user-select: none;
}
.accordion-body {
    padding: 10px 30px;
}
.accordion-item.accordion-folded .accordion-body {
    height: 0;
    display: none;
}

/* 表格 */
.table-strip {
    border-collapse: collapse;
}
.table-strip tr {
    border-bottom: var(--color-border) 1px solid;
}
.table-strip td, .table-strip th {
    padding: 10px;
}
.table-strip th {
    font-weight: bold;
    text-align: left;
}
.table-strip tbody tr:nth-child(odd) {
    background-color: var(--color-table-row-dark);
}
.table-strip tbody tr:nth-child(even) {
    background-color: var(--color-table-row-light);
}

/* 按钮 */
.btn-outline {
    background-color: rgba(0, 0, 0, 0);
    padding: 5px 10px;
    border: white 1px solid;
    border-radius: 5px;
}
.btn {
    background-color: var(--blue);
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn:hover {
    background-color: var(--blue-dark);
    color: white;
    user-select: none;
}

/* 进度条 */
progress {
	/* 清除默认样式 */
	-webkit-appearance: none;
	appearance: none;
}
progress::-webkit-progress-bar {
	border-radius: 3px;
	background-color: #e6ebee;
}
progress::-webkit-progress-value {
	border-radius: 3px;
	background-color: #007bff;
}
progress.strip::-webkit-progress-value {
	background-image: linear-gradient(
		45deg, /* 渐变的方向 */
		rgba(255,255,255,.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255,255,255,.15) 50%,
		rgba(255,255,255,.15) 75%, 
		transparent 75%
	);
    background-size: 1rem 1rem; /* 设置背景大小，让背景重复而不是拉伸 */
}
progress.blue::-webkit-progress-value {
	background-color: var(--blue);
}
progress.green::-webkit-progress-value {
	background-color: var(--green);
}
progress.red::-webkit-progress-value {
	background-color: var(--red);
}
progress.yellow::-webkit-progress-value {
	background-color: var(--yellow);
}

/* 表单 */
input[type="text"], input[type="password"] {
    border: 1px solid var(--color-input-border);
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
input[type="text"]:focus, input[type="password"]:focus {
    outline: none;
    border-color: var(--color-input-border);
}

/* --------- 颜色 --------- */
.white {
    color: white;
}
.green {
    color: var(--green);
}
.blue {
    color: var(--blue);
}
.red {
    color: var(--red);
}
.yellow {
    color: var(--yellow);
}
.bg-green {
    background-color: var(--green);
}
.bg-blue {
    background-color: var(--blue);
}
.bg-red {
    background-color: var(--red);
}
.bg-yellow {
    background-color: var(--yellow);
}